{% extends 'base.html' %}

{% block title %}Заказ оформлен - МОЙ НЕ САМ{% endblock %}

{% block content %}
<div class="text-center py-5">
    <div class="mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="currentColor" class="bi bi-check-circle-fill text-success" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
        </svg>
    </div>
    <h1 class="display-4 mb-4">Заказ успешно оформлен!</h1>
    <p class="lead mb-4">Ваш заказ #{{ order.id }} был успешно оформлен. Мы свяжемся с вами в ближайшее время.</p>
    
    <div class="card mb-4 mx-auto" style="max-width: 600px;">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">Детали заказа</h5>
        </div>
        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between">
                    <span>Номер заказа:</span>
                    <span class="fw-bold">{{ order.id }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Дата:</span>
                    <span>{{ order.created_at|date:"d.m.Y H:i" }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Статус:</span>
                    <span class="badge bg-warning">{{ order.get_status_display }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Адрес доставки:</span>
                    <span>{{ order.shipping_address }}</span>
                </li>
                <li class="list-group-item d-flex justify-content-between">
                    <span>Сумма:</span>
                    <span class="fw-bold">{{ order.total_amount }} ₽</span>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="d-flex justify-content-center gap-3">
        <a href="{% url 'orders' %}" class="btn btn-primary">Мои заказы</a>
        <a href="{% url 'catalog' %}" class="btn btn-outline-primary">Продолжить покупки</a>
    </div>
</div>
{% endblock %}